﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #myCanvas {
            background-color: lightblue;
            width: 400px;
            height: 400px;
        }
    </style>
    <script type="text/javascript">

        var canvas;

        var interval;
        document.onreadystatechange = function (e) {
            if (document.readyState == 'complete') {
                //DOM已经加载好
                canvas = document.getElementById("myCanvas");
                 
                interval = setInterval(function () {
                    drawClockBoard(canvas);
                    drawHoursText(canvas);
                    drawPointers(canvas, new Date());
                }, 1000);
            }
        };
        /**
         * 渲染表盘
         * */
        function drawClockBoard(canvas) {
            var ctx = canvas.getContext("2d");
            ctx.clearRect(0, 0, canvas.width, canvas.height);//清空画布
            ctx.strokeStyle = "#000000";
            ctx.fillStyle = "#000000";
            var canvasRect = canvas.getBoundingClientRect();
            canvas.width = canvasRect.width * 1;
            canvas.height = canvasRect.height * 1;
            var x = canvas.width / 2;
            var y = canvas.height / 2;
            var radiusX = canvas.width / 2 - 10;

            //圆形
            ctx.lineWidth = 4;
            ctx.beginPath();
            ctx.arc(x, y, radiusX, 0, 2 * Math.PI);
            ctx.closePath();

            ctx.stroke();
            for (var i = 0; i < 60; i++) {
                var length = 10;//普通刻度线
                ctx.lineWidth = 3;
                if (i % 5 == 0) {
                    length = 15;//整点刻度线
                    ctx.lineWidth = 6;
                }
                var pos1 = getPos(x, y, radiusX, i * Math.PI / 30);
                var pos2 = getPos(x, y, radiusX - length, i * Math.PI / 30);


                ctx.beginPath();
                ctx.moveTo(pos1.x, pos1.y);
                ctx.lineTo(pos2.x, pos2.y);
                ctx.closePath();
                ctx.stroke();
            }
        }

        /**
         * 渲染整点数字
         * */
        function drawHoursText(canvas) {
            var ctx = canvas.getContext("2d");
            ctx.strokeStyle = "#000000";
            ctx.fillStyle = "#000000";
            ctx.font = "22px serif";
            ctx.lineWidth = 0;
            var x = canvas.width / 2;
            var y = canvas.height / 2;

            var length = canvas.width / 2 - 40;
            for (var i = 0; i < 12; i++) {
                var txt = (i + 1).toString();
                var tsize = ctx.measureText(txt);
                var pos = getPos(x, y, length, Math.PI - (i + 1) * (Math.PI / 6))

                ctx.fillText(txt, pos.x - tsize.width / 2, pos.y + 8);

                //ctx.beginPath();
                //ctx.arc(pos.x, pos.y, 10, 0, Math.PI * 2);
                //ctx.closePath();
                //ctx.stroke();
            }
        }
        /**
         * 渲染指针
         * @param canvas
         * @param now 当前时间
         */
        function drawPointers(canvas, now) {
            var ctx = canvas.getContext("2d");
            ctx.strokeStyle = "#000000";
            ctx.fillStyle = "#000000";

            var hours = now.getHours();
            var minutes = now.getMinutes();
            var seconds = now.getSeconds();

            var x = canvas.width / 2;
            var y = canvas.height / 2;
            var length = 60;
            //时针
            var pos1 = getPos(x, y, length, Math.PI - hours * (Math.PI / 6));
            ctx.lineWidth = 8;
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineTo(pos1.x, pos1.y);
            ctx.closePath();
            ctx.stroke();
            var length = 60;
            //分针
            ctx.strokeStyle = "gray";
            length = 80
            pos1 = getPos(x, y, length, Math.PI - minutes * (Math.PI / 30));
            ctx.lineWidth = 4;
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineTo(pos1.x, pos1.y);
            ctx.closePath();
            ctx.stroke();
            //秒针
            ctx.strokeStyle = "orange";
            length = 110
            pos1 = getPos(x, y, length, Math.PI - seconds * (Math.PI / 30));
            ctx.lineWidth = 1;
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineTo(pos1.x, pos1.y);
            ctx.closePath();
            ctx.stroke();
        }

        /**
         * 已知圆心坐标，偏角和半径，计算圆周上的坐标
         * @param x1 圆心X
         * @param y1 圆心Y
         * @param length 半径
         * @param angle 偏角
         */
        function getPos(x1, y1, length, angle) {
            var x = Math.sin(angle) * length;
            var y = Math.cos(angle) * length;
            return { x: x + x1, y: y + y1 };
        }
    </script>
</head>
<body>
    <canvas id="myCanvas">
    </canvas>
</body>
</html>
